import React, { Component } from 'react'
import { Image } from 'react-vant';
import style from './main.module.css'

const typeobj = {
  "D3": '3D',
  "D3MAX": '3DMAX',
  "NEW": "NEW"
}

export class Main extends Component {
  render() {
    const { tablist, active } = this.props;
    return (
      <main className='scrollBox'>
        <ul>
          {
            tablist[active] && tablist[active].children.map((item, index) => {
              return <li key={index}>
                <Image src={item.img} lazyload={true} />
                <div>
                  <h4>{item.h4}<span className={style[item.type]}>{typeobj[item.type]}</span></h4>
                  <p className='text'>{item.title}</p>
                  <button className={style[item.state]}>{item.state === 'forSale' ? "预售" : "购票"}</button>
                </div>
              </li>
            })
          }
        </ul>
      </main>
    )
  }
}

export default Main